<template>
  <div class="table-from">
    <a-row style="margin-bottom: 12px" type="flex" :class="{ 'change-width': !showMore }">
      <a-col :span="6">
        <div class="table-from-box dissymmetry">
          <span class="table-from-label">项目编号：</span>
          <a-input placeholder="请输入项目编号" v-model:value="fromData.projectCode" style="width: 100%" allowClear>
            <template #prefix>
              <SvgIcon class="iconDef" :name="'search'" :color="'#d9d9d9'" width="16" height="16" />
            </template>
          </a-input>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="table-from-box dissymmetry">
          <span class="table-from-label">项目名称：</span>
          <a-input placeholder="请输入项目名称" v-model:value="fromData.projectName" style="width: 100%" allowClear>
            <template #prefix>
              <SvgIcon class="iconDef" :name="'search'" :color="'#d9d9d9'" width="16" height="16" />
            </template>
          </a-input>
        </div>
      </a-col>
      <a-col :span="6">
        <div class="table-from-box">
          <span class="table-from-label dissymmetry">项目类型：</span>
          <a-select
            style="width: 100%"
            show-search
            optionFilterProp="name"
            :options="projectTypeOptions"
            v-model:value="fromData.projectType"
            placeholder="请选择"
            :fieldNames="{ label: 'name', value: 'id' }"
            allowClear
          >
            <template #suffixIcon>
              <CaretDownOutlined style="color: #6b84a5" />
            </template>
          </a-select>
        </div>
      </a-col>

      <a-col :span="6">
        <div class="table-from-box">
          <template v-if="showMore">
            <span class="table-from-label dissymmetry">项目负责人：</span>
            <a-select
              style="width: 100%"
              :options="userOptions"
              show-search
              optionFilterProp="realName"
              v-model:value="fromData.projectLeader"
              placeholder="请选择"
              :fieldNames="{ label: 'realName', value: 'userId' }"
              allowClear
            >
              <template #suffixIcon>
                <CaretDownOutlined style="color: #6b84a5" />
              </template>
            </a-select>
          </template>

          <div class="table-from-btn-right" v-if="!showMore">
            <div class="actionMore" @click="handleCutStatus">
              {{ showMore ? '收起' : '更多' }}
              <UpOutlined :class="{ 'rotate-box': !showMore }" />
            </div>
            <a-button class="actionBtn" type="primary" ghost @click="handleSearch">
              <SvgIcon class="iconDef" :name="'search'" :color="'#2590FF'" width="16" height="16" />
              查询
            </a-button>

            <a-button class="actionBtn" type="primary" ghost @click="resetData">
              <SvgIcon class="iconDef" :name="'refresh'" :color="'#2590FF'" width="16" height="16" />
              重置
            </a-button>
          </div>
        </div>
      </a-col>
    </a-row>
    <a-row type="flex" v-show="showMore" class="paddingBottom">
      <a-col :span="6">
        <div class="table-from-box dissymmetry">
          <span class="table-from-label">创建时间：</span>
          <a-range-picker
            v-model:value="fromData.createTime"
            :valueFormat="'YYYY-MM-DD HH:mm:ss'"
            allowClear
            :placeholder="['开始时间', '结束时间']"
            :show-time="{ format: 'HH:mm:ss' }"
          >
            <template #suffixIcon>
              <CaretDownOutlined style="color: #6b84a5" />
            </template>
          </a-range-picker>
        </div>
      </a-col>
      <a-col :span="18">
        <div class="table-from-box">
          <div class="table-from-btn" v-if="showMore">
            <div class="actionMore" @click="handleCutStatus">
              {{ showMore ? '收起' : '更多' }}
              <UpOutlined :class="{ 'rotate-box': !showMore }" />
            </div>
            <a-button class="actionBtn" type="primary" ghost @click="handleSearch">
              <SvgIcon class="iconDef" :name="'search'" :color="'#2590FF'" width="16" height="16" />
              查询
            </a-button>

            <a-button class="actionBtn" type="primary" ghost @click="resetData">
              <SvgIcon class="iconDef" :name="'refresh'" :color="'#2590FF'" width="16" height="16" />
              重置
            </a-button>
          </div>
        </div>
      </a-col>
    </a-row>
  </div>
</template>

<script lang="ts" setup>
import { getProjectTypeList, getUserList } from '@/api/projectManagement';
import { CaretDownOutlined, UpOutlined } from '@ant-design/icons-vue';
const showMore = ref(false);

const emits = defineEmits(['handleSearch']);
const fromData = reactive<any>({
  projectCode: '',
  projectName: '',
  projectType: undefined,
  projectLeader: undefined,
  createTime: [],
});

const handleSearch = () => {
  emits('handleSearch', {
    ...fromData,
    startTime: fromData.createTime[0] || '',
    endTime: fromData.createTime[1] || '',
  });
};

const resetData = () => {
  fromData.projectCode = '';
  fromData.projectName = '';
  fromData.projectType = undefined;
  fromData.projectLeader = undefined;
  fromData.createTime = [];
  emits('handleSearch', {
    ...fromData,
    startTime: fromData.createTime[0] || '',
    endTime: fromData.createTime[1] || '',
  });
};

const projectTypeOptions = ref<any[]>([]);
const getProjectTypeData = async () => {
  await getProjectTypeList().then((res) => {
    projectTypeOptions.value = res;
  });
};

const userOptions = ref<any[]>([]);
const getUserData = async () => {
  await getUserList().then((res) => {
    userOptions.value = res;
  });
};

const getNewData = () => {
  getProjectTypeData();
  getUserData();
};

onBeforeMount(() => {
  getNewData();
});

defineExpose({
  resetData,
  getNewData,
});

//切换收起打开状态
const handleCutStatus = () => {
  showMore.value = !showMore.value;
};
</script>

<style scoped lang="less">
.table-from {
  padding: 16px 0 0 0;
  border-bottom: 1px solid #e7eff8;
  .table-from-box {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: flex-end;
    overflow: hidden;
    .table-from-label {
      min-width: 120px;
      text-align: right;
      display: inline-block;
      margin-left: 12px;
    }
  }
  .dissymmetry {
    .table-from-label {
      min-width: 80px;
    }
  }

  .table-from-btn {
    display: flex;
    justify-content: flex-end;
    * {
      margin-right: 12px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .table-from-btn-right {
    display: flex;
    justify-content: flex-end;
    * {
      margin-right: 12px;
      &:last-child {
        margin-right: 0;
      }
    }
  }

  .change-width {
    .table-from-box {
      .table-from-label {
        min-width: 80px;
      }
    }
  }

  .rotate-box {
    transform: rotate(180deg);
  }

  .actionMore {
    min-width: 40px;
    display: flex;
    color: #1890ff;
    justify-content: center;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding-right: 16px;
    &:after {
      content: '';
      width: 1px;
      height: 14px;
      background: #e7eff8;
      margin-left: 16px;
    }
    &:hover {
      color: #1861ff;
    }
  }

  .paddingBottom {
    padding-bottom: 16px;
  }
}
</style>
